<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全选：<input type="checkbox" name="" id="isAll" onchange="allChangeHandler(this)">
    总价： <span id="all-price"></span>
    总数量： <span id="all-num"></span>
    <button onclick="submitOrder()">先下单接口</button>
    <button onclick="payOrder()">再支付接口</button>

    <button onclick="delSelectHandler()">删除所选</button>
    <button onclick="clearHandler()">清空购物车</button>



    <ul class="clist">
        <!-- <li>
            <input type="checkbox" name="" id="">
            <h2></h2>
            <p>单价：</p>
            <p>小计：</p>
            <button>删除</button>
            <button>-</button>
            <input type="text" name="" id="">
            <button>+</button>
        </li> -->
    </ul>
    <script type="module">
        import axios from './js/axios.min.js';
        let baseURL = 'http://localhost:3000'
        axios.defaults.baseURL = baseURL;
        let token = localStorage.getItem('token');
        console.log(token);
        // 设置到请求头的 authora  
        // authorization
        axios.defaults.headers.common['Authorization'] = "bearer " + token;
        let pagesize = 1000;
        let cartAPI = '/api/front/carts'

        let productArr = [];


        showCartNum()


        let order_id
        window.payOrder = async function () {
            let r = await axios.get('/api/front/orders/pay/' + order_id).then(r => {
                console.log(r.data);
                // location.href = r.data
                // document.appendChild()
                document.write(r.data)
            })


        }

        window.submitOrder = async function () {

            let r = await axios.post('/api/front/orders')
            console.log(r.data);
            console.log(r.data.data._id);
            order_id = r.data.data._id


        }



        async function showCartNum() {

            let pagesize = 1000;
            let r = await axios.get(cartAPI, { params: { pagesize } });
            console.log(r.data.data);

            // 遍历 购物车数组--让数组每一个元素 pnum属性都累加
            // let sum = r.data.data.reduce((sum, v) => sum + v.pnum, 0)
            // let sum = 0;
            // r.data.data.forEach(v => {
            //     sum = sum + v.pnum
            // })
            // console.log(sum);
            // document.querySelector('.cart-num-span').innerHTML = sum


            // 购物车数组 --映射成 li标签--赋值给ul
            productArr = [...r.data.data];
            productArr = productArr.filter(v => v.pid != null)
            let liArr = productArr.map(v => `
            <li>
                <input type="checkbox" name="" id="" ${v.checked ? 'checked' : ''}  onchange="changeHandler('${v._id}',this)">
                <h2>${v.pid.title}</h2>
                <p>单价：${v.pid.price}</p>
                <p>小计：${v.pid.price * v.pnum}</p>
                <button onclick="cartDelHandler('${v._id}')">删除</button>
                <button>-</button>
                <input type="text" name="" id="" value="${v.pnum}">
                <button onclick="cartAdd('${v._id}')">+</button>
              </li> 
            
            `);
            document.querySelector('.clist').innerHTML = liArr.join('')



            // 处理 productArr 得到总价 和 总数 
            // 算 productArr 是否所有元素的 checked 都为true
            let isAll = productArr.every(v => v.checked == true);
            // console.log(isAll);
            if (productArr.length == 0) {
                isAll = false
            }
            let isAllIpt = document.querySelector('#isAll');
            isAllIpt.checked = isAll


            // 获取所有 checked为true 的商品
            let selectArr = productArr.filter(v => v.checked == true);

            // 算总数
            let countNum = selectArr.reduce((sum, v) => sum + v.pnum, 0)
            // 算总价
            let countPrice = selectArr.reduce((sum, v) => sum + v.pnum * v.pid.price, 0);
            console.log(countNum);
            console.log(countPrice);

            document.querySelector('#all-price').innerHTML = countPrice;
            document.querySelector('#all-num').innerHTML = countNum;





        }



        // 删除
        //  <button onclick="cartDelHandler('${v._id}')">删除</button>
        // cartDelHandler

        window.cartDelHandler = async function (cid) {
            console.log(cid);
            // 删除请求 动态id
            let r = await axios.delete(cartAPI + '/' + cid)
            console.log(r);
            // 刷新列表

            showCartNum();


        }


        // 修改状态
        // <input type="checkbox" name="" id="" ${v.checked ? 'checked' : ''}  onchange="change('${v._id}',this)">
        window.changeHandler = async function (cid, ipt) {
            console.log(cid);
            console.log(ipt.checked);

            // 调用修改接口
            let r = await axios.patch(cartAPI + '/' + cid, { checked: ipt.checked })
            showCartNum()

            // 处理 选中状态
        }

        // 修改数量

        window.cartAdd = async function (cid) {
            console.log(cid);

            // 购物车一条记录的id 
            // 购物车数组--去数组中 元素的_id 和 cid 相等的 那个元素 ，对象,对象的pnum

            console.log(productArr);

            //找到数组中第一个满足条件的元素 -- 条件 v._id（元素的——id） 和 cid 相等
            let cartObj = productArr.find(v => v._id === cid)
            console.log(cartObj);

            let currentNum = cartObj.pnum;
            currentNum++;
            //调用修改接口

            await axios.patch(cartAPI + '/' + cid, { pnum: currentNum })

            showCartNum()

        }

        window.cartSub = async function (cid) {
            console.log(cid);

            // 购物车一条记录的id 
            // 购物车数组--去数组中 元素的_id 和 cid 相等的 那个元素 ，对象,对象的pnum

            console.log(productArr);

            //找到数组中第一个满足条件的元素 -- 条件 v._id（元素的——id） 和 cid 相等
            let cartObj = productArr.find(v => v._id === cid)
            console.log(cartObj);

            let currentNum = cartObj.pnum;

            // 如果当前购物车这个记录的数量是1 
            if (currentNum == 1) {
                // 逻辑
                return
            }
            currentNum--;
            //调用修改接口

            await axios.patch(cartAPI + '/' + cid, { pnum: currentNum })

            showCartNum()

        }


        // 

        window.allChangeHandler = function (ipt) {
            /*
                获取全选按钮的状态
            */
            let checked = ipt.checked;
            console.log(checked);
            // 遍历 productArr ，每遍历一次，都发起一个修改请求 
            console.log(productArr);

            // let p0 = Promise.all([p1,p2,p3])
            // p0.then(r=>{

            // })

            // productArr.forEach(v => {
            //     v._id;//购物车的id
            //     checked
            //     axios.patch(cartAPI + '/' + v._id, { checked }).then(r => {
            //         showCartNum()
            //     })
            // });


            // 循环遍历 把每一个 请求创建的promise对象 都添加到  数组中，
            let pArr = []
            productArr.forEach(v => {
                v._id;//购物车的id
                checked
                let p = axios.patch(cartAPI + '/' + v._id, { checked });
                pArr.push(p)
            });

            console.log(pArr);
            // 创建一个p0对象，状态依赖数组中所有promise对象
            let p0 = Promise.all(pArr)
            p0.then(r => {
                showCartNum()
            })

            // showCartNum 得等 循环里面的请求都 完成了

        }


        // 清空购物车
        window.clearHandler = function () {
            // 循环遍历 productArr  每遍历一次 都发起一个删除请求

            // productArr.forEach(v => {
            //     axios.delete(cartAPI + '/' + v._id).then(r => {
            //         showCartNum()
            //     })
            // })

            let pArr = []
            productArr.forEach(v => {
                let p = axios.delete(cartAPI + '/' + v._id);
                pArr.push(p)
            });
            let p0 = Promise.all(pArr);
            p0.then(r => {
                showCartNum()
            })
        }

        // 删除所选
        window.delSelectHandler = function () {
            // 循环遍历 productArr  每遍历一次 都发起一个删除请求

            // productArr.forEach(v => {
            //     axios.delete(cartAPI + '/' + v._id).then(r => {
            //         showCartNum()
            //     })
            // })

            let pArr = []
            // 过滤出 所有选中
            productArr.filter(v => v.checked == true).forEach(v => {
                let p = axios.delete(cartAPI + '/' + v._id);
                pArr.push(p)
            });
            let p0 = Promise.all(pArr);
            p0.then(r => {
                showCartNum()
            })
        }

    </script>

</body>

</html>